<template>
  <div class="set_btn-wrapper"> <svg height="45"
         width="150"
         xmlns="#"
         @click="onClick">
      <rect id="set_button"
            height="45"
            width="150"></rect>
    </svg>
    <div id="set_text"
         @click="onClick">
      <!-- <a :href=""> -->
      <slot></slot>
      <!-- </a> -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit("click");
    }
  }
};
</script>

<style lang="less" scoped>
.set_btn-wrapper {
  width: auto;
  line-height: 45px;
  display: inline-block;
  margin-right: 2em;
  text-align: center;
  cursor: pointer;
}
svg:not(:root) {
  overflow: hidden;
}
.set_btn-wrapper:hover #set_button {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #56c5ff;
}
#set_button {
  stroke-width: 6px;
  fill: transparent;
  stroke: #56c5ff;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -228;
  transition: 1s all ease;
}
:not(svg) {
  transform-origin: 0px 0px;
}
#set_text {
  margin-top: -60px;
  text-align: center;
  color: #409eff;
  text-decoration: none;
  font-weight: 400;
}
// #set_7_text a {
// }
// a:-webkit-any-link {
//   color: -webkit-link;
//   text-decoration: underline;
// }
</style>
